<template>
  <el-row v-loading="loading">
    <el-col :span="24">
      <el-row class="search-row">
        <el-col :span="12">
          <el-input placeholder="请输入档案号/姓名" size="small" v-model="like1" style="width: 260px;">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
          <div style="height: 30px;">
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-table :data="findOrder().slice((pageNum-1)*pageSize,pageNum*pageSize)" border size="mini" header-cell-class-name="header-row">
            <el-table-column prop="fileNumber" label="档案号" header-align="center" align="center"></el-table-column>
            <el-table-column prop="name" label="姓名" header-align="center" align="center"></el-table-column>
            <el-table-column prop="sex" label="性别" header-align="center" align="center"></el-table-column>
            <el-table-column prop="age" label="年龄" header-align="center" align="center"></el-table-column>
            <el-table-column prop="tInterposeClassify.interposeStatus" label="状态" header-align="center" align="center"></el-table-column>
            <el-table-column prop="tInterposeClassify.peopleClassify" label="人群分类" header-align="center" align="center"></el-table-column>
            <el-table-column prop="tHealthmgr.healthMgrName" label="健康管理师" header-align="center" align="center"></el-table-column>
            <el-table-column label="操作" header-align="center" align="center">
              <template slot-scope="scope">
                <el-button type="primary" size="mini"
                  @click="xgtaocan(scope.row)">确认分类</el-button>
              </template>
            </el-table-column>
        </el-table>
        </el-col>
        <el-col :span="24">
          <el-pagination
            background
            @size-change="handleSizeChange"
            :current-page.sync="pageNum"
            :page-sizes="[2,4,6,8]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="findOrder().length">
          </el-pagination>
          <el-dialog title="人群分类" :visible.sync="dialogTransferVisible">
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
              <el-tab-pane label="基本信息" name="first">
                <h2>信息</h2>
                <table>
                  <tr>
                    <td><span>档案号:</span></td>
                    <td><span v-text="jbxx.fileNumber"></span></td>
                    <td></td>
                    <td><span>姓名:</span></td>
                    <td><span v-text="jbxx.name"></span></td>
                  </tr>
                  <tr>
                    <td><span>性别:</span></td>
                    <td><span v-text="jbxx.sex"></span></td>
                    <td><span>年龄:</span></td>
                    <td><span v-text="jbxx.age"></span></td>
                  </tr>
                </table>
                <p>
                  <span>疾病史:</span>
                  <span v-text="jbxx.tMemberMedicalhistory.medicalHistory"></span>
                </p>

                 <p>
                  <span>遗传史:</span>
                  <span v-text="jbxx.tMemberMedicalhistory.familyHistory"></span>
                </p>

                <p>
                  <span>手术史:</span>
                  <span v-text="jbxx.tMemberMedicalhistory.allergicHistory"></span>
                </p>

              </el-tab-pane>
              <el-tab-pane label="体检信息" name="second">
                <el-row class="search-row">
                  <el-col :span="12">
                    <el-input placeholder="请输入档案号" size="small" v-model="liketj" style="width: 260px;">
                      <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                    <div style="height: 30px;">
                    </div>
                  </el-col>
                </el-row>
                <el-col :span="24">
                  <el-table :data="findTj().slice((pageNum2-1)*pageSize2,pageNum2*pageSize2)" border size="mini" header-cell-class-name="header-row">
                    <el-table-column prop="fileNumber" label="档案号" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="tMemberExamination.examDate" label="体检日期" header-align="center" align="center"></el-table-column>
                    <el-table-column label="查看体检报告" header-align="center" align="center">
                      <template slot-scope="scope">
                        <el-button type="primary" size="mini"
                          @click="ck(scope.row)">查看</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-col>
                <el-col :span="24">
                  <el-pagination
                    background
                    @size-change="handleSizeChange2"
                    :current-page.sync="pageNum2"
                    :page-sizes="[2,4,6,8]"
                    :page-size="pageSize2"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="findTj().length">
                  </el-pagination>
                </el-col>
              </el-tab-pane>

              <el-tab-pane label="确认分类">
                <el-divider><i class="el-icon-guide"></i>确认分类：</el-divider>
                <div style="height: 20px;"></div>
                <el-form  label-width="400px" label-position="right" size="small">
                   <el-transfer
                    filterable
                    :filter-method="filterMethod"
                    filter-placeholder="请输入分类名称"
                    v-model="vl"
                    :data="tcs"
                    @change="getTaoCan"
                    :right-default-checked='jbks'>
                  </el-transfer>
                </el-form>
                <el-divider><i class="el-icon-user-solid"></i>健康管理师：</el-divider>
                <div style="height: 20px;"></div>
                <div>
                    健康管理师：<el-select v-model="jks" placeholder="请选择">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                </div>
              </el-tab-pane>
            </el-tabs>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="qd()">确 定</el-button>
              <el-button @click="dialogTransferVisible=false">取消</el-button>
            </div>
          </el-dialog>
          <el-dialog title="体检报告" :visible.sync="isOk">
            <el-pagination
               background
               @size-change="sizeChange"
                :current-page.sync="numPage"
               :page-sizes="[2,4,6,8]"
               :page-size="sizePage"
               layout="total, sizes, prev, pager, next, jumper"
              :total="examinationList.length">
            </el-pagination>
            <el-table :data="examinationList.slice((numPage-1)*sizePage,numPage*sizePage)" border size="mini" header-cell-class-name="header-row">
              <el-table-column prop="tMemberExamination.examDate" label="体检日期" header-align="center" align="center"></el-table-column>
              <el-table-column prop="name" label="体检项目" header-align="center" align="center"></el-table-column>
              <el-table-column prop="tMemberData.checkitemData" label="体检结果" header-align="center" align="center"></el-table-column>
            </el-table>

          </el-dialog>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import { listClassify,getJbxx,queryTj} from '@/api/xsxmember'
import { listAllJb} from '@/api/xsxdiseaseLibrary'
import { listAllJks,getHealthMgrId} from '@/api/xsxhealthmgr'
import { rqfl} from '@/api/xsxnterposeClassify'
import {getMemberExamination} from '@/api/xsxmemberExamination'



export default {
  data() {
      return {
        sizePage:4,
        numPage:1,
        examinationList:[],
        userId:0,
        flid:0,
        jks:'',
        options:[],
        jbkList:[],
        tjxx:[],
        jbxx:{fileNumber:'',sex:'',name:'',age:'',tMemberMedicalhistory:{medicalHistory:"无",familyHistory:"无",allergicHistory:"无"}},
        jbks:[],
        tcs:[],
        changeTaocan:[],
        vl: [],
        isOk:false,
        dialogTransferVisible:false,
        classifyList:[],
        loading: false,
        like1:'',
        liketj:"",
        pageSize:4,//每页显示的条数
        pageNum:1,
        pageSize2:4,//每页显示的条数
        pageNum2:1,
        activeName:'first',
        TaoCans:{}
      };
  },
  methods: {
    ck(row){
      this.examinationList=[]
      getMemberExamination(row.id).then(response => {
        if(response.data!=''){
          this.examinationList=response.data;
        }
      })
      this.isOk=true;
    },
    handleSizeChange(val) {
     this.pageSize = val;
    },
    handleSizeChange2(val) {
     this.pageSize2 = val;
    },
    sizeChange(val) {
     this.sizePage = val;
    },
    async pageInit() {
      let userid=JSON.parse(sessionStorage.getItem('currentUser')).id
      try {
        let [ttyy] = await Promise.all([
          getHealthMgrId(userid)
        ])
        this.userId=ttyy.data
        listClassify(this.userId,0).then(response => {
          console.log(response.data)
          this.classifyList=response.data
        })
      } catch(error) {
        this.outputError(error)
      }
    },
    findOrder(){
        return this.classifyList.filter((item,i)=>{
            if(item.fileNumber.includes(this.like1) || item.name.includes(this.like1)){
                return item;
            }
        })
    },
    findTj(){
        return this.tjxx.filter((item,i)=>{
            if(item.fileNumber.includes(this.liketj)){
                return item;
            }
        })
    },
    xgtaocan(row){
      this.vl=[];
      this.options=[];
      this.jks='';
      this.flid=row.id;
      this.jbxx.fileNumber=row.fileNumber;
      this.jbxx.sex=row.sex;
      this.jbxx.age=row.age;
      this.jbxx.name=row.name;
      getJbxx(row.id).then(response => {
        if(response.data!=''){
          this.jbxx=response.data
        }
      })
      listAllJks().then(response => {
        for(var i=0;i<response.data.length;i++){
          this.options.push({
            label: response.data[i].healthMgrName,
            value: response.data[i].healthMgrId
          });
        }
      })
      this.dialogTransferVisible=true;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    filterMethod(query, item) {
      return item.label.indexOf(query) > -1;
    },
    getTaoCan(a){
      this.changeTaocan=[];
      this.changeTaocan=a;
    },
    qd(){
       if(this.changeTaocan.length==0){
        alert("请选择人群分类")
        return;
      }
      if(this.jks==''){
        alert("请选择健康管理师")
        return;
      }
      let fls=JSON.stringify(this.changeTaocan)
      rqfl(this.flid,fls,this.jks).then(response => {
        if(response.data>0){
          this.pageInit()
        }
      })
      this.dialogTransferVisible=false;

    },
  },
  created() {
    this.pageInit()
     queryTj().then(response => {
        this.tjxx=response.data
      })

      listAllJb().then(response => {
        this.jbkList=response.data
        for(var i=0;i<this.jbkList.length;i++){
          this.tcs.push({
            label: this.jbkList[i].name,
            key: this.jbkList[i].name
          });
        }
      })

  }
}
</script>
